<template>
  <!-- 通过 flex 指定水平布局 -->
  <div class="fixed top-[0px] h-[64px] px-2 right-0 z-50 flex items-center bg-white transition-all duration-500 shadow"
       style="left: 250px; border-bottom-color: #e7eaee; border-bottom-width: 1px" :style="{left: menuStore.menuWidth}">
    <!-- 左边栏收缩、展开 -->
    <div @click="handleMenuWidth"
         class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200">
      <el-icon>
        <Fold v-if="menuStore.menuWidth === '250px'"/>
        <Expand v-else/>
      </el-icon>
    </div>

    <!-- 右边容器，通过 ml-auto 让其在父容器的右边 -->
    <div class="ml-auto flex">
      <!-- 点击刷新页面 -->
      <el-tooltip class="box-item" effect="dark" content="刷新" placement="bottom">
        <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200"
             @click="handleRefresh">
          <el-icon>
            <Refresh/>
          </el-icon>
        </div>
      </el-tooltip>
      <!-- 点击跳转前台首页 -->
      <el-tooltip class="box-item" effect="dark" content="跳转前台" placement="bottom">
        <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200"
             @click="router.push('/')">
          <el-icon>
            <Monitor />
          </el-icon>
        </div>
      </el-tooltip>
      <!-- 点击全屏展示 -->
      <el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom">
        <div
            class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 mr-2 hover:bg-gray-200"
            @click="toggle">
          <el-icon>
            <FullScreen v-if="!isFullscreen"/>
            <Aim v-else/>
          </el-icon>
        </div>
      </el-tooltip>

      <!-- 登录用户头像 -->
      <el-dropdown @command="handleCommand" class="flex items-center justify-center">
                <span class="el-dropdown-link flex items-center justify-center text-gray-700 text-xs">
                    <!-- 头像 Avatar -->
                    <el-avatar :size="30" :src="avatar"/>
                    <span class="text-gray-700 ml-3">{{ userStore.userInfo.username }}</span>
                    <el-icon class="el-icon--right">
                        <arrow-down/>
                    </el-icon>
                </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="修改用户密码"
        width="500"
        draggable
        overflow
    >
      <el-form ref="formRef" :rules="rules" :model="form">
        <el-form-item label="用户名" prop="username" label-width="120px">
          <!-- 输入框组件 -->
          <el-input size="large" v-model="form.username" placeholder="请输入用户名" clearable disabled/>
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="120px">
          <el-input size="large" type="password" v-model="form.password" placeholder="请输入密码"
                    clearable show-password/>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword" label-width="120px">
          <el-input size="large" type="password" v-model="form.rePassword" placeholder="请确认密码"
                    clearable show-password/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import avatar from '@/assets/avatar.ico'
import {useMenuStore} from "@/stores/menu.js";
import {ArrowDown, Expand, Fold, FullScreen} from "@element-plus/icons-vue";
import {useFullscreen} from '@vueuse/core'
import {useUserStore} from "@/stores/user.js";
import {useRouter} from "vue-router"; // 引入 useFullscreen
import {showModel, showMessage} from "@/composables/util.js"
import {ref, reactive} from "vue"
import {updateAdminPassword} from "@/api/admin/user.js"


const menuStore = useMenuStore()
const userStore = useUserStore()
const router = useRouter()
// isFullscreen 表示当前是否处于全屏；toggle 用于动态切换全屏、非全屏
const {isFullscreen, toggle} = useFullscreen()
const dialogVisible = ref(false)
//点击收起或展开侧边栏
const handleMenuWidth = () => {
  menuStore.handleMenuWidth()
}


// 点击刷新页面
const handleRefresh = () => location.reload()


// 退出登录
// 下拉菜单事件处理
const handleCommand = (command) => {
  // 更新密码
  if (command === 'updatePassword') {
    // 省略...
    dialogVisible.value = true
  } else if (command === 'logout') { // 退出登录
    logout()
  }
}

// 退出登录
function logout() {
  showModel('是否确认要退出登录？', '退出登录').then(() => {
    userStore.logout()
    showMessage('退出登录成功！')
    // 跳转登录页
    router.push('/login')
  })
}

// 修改用户密码

// 表单引用
const formRef = ref(null)
// 修改用户密码表单对象
const form = reactive({
  username: userStore.userInfo.username || '',
  password: '',
  rePassword: ''
})

// 规则校验
const rules = {
  username: [
    {
      required: true,
      message: '用户名不能为空',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
  ],
  rePassword: [
    {
      required: true,
      message: '确认密码不能为空',
      trigger: 'blur',
    },
  ]
}
const onSubmit = () => {
  // 先验证 form 表单字段
  formRef.value.validate((valid) => {
    if (!valid) {
      console.log('表单验证不通过')
      return false
    }

    if (form.password !== form.rePassword) {
      showMessage('两次密码输入不一致，请检查！', 'warning')
      return
    }

    // 调用修改用户密码接口
    updateAdminPassword(form).then((res) => {
      // 判断是否成功
      if (res.success === true) {
        showMessage('密码重置成功，请重新登录！')
        // 退出登录
        userStore.logout()

        // 隐藏对话框
        dialogVisible.value = false

        // 跳转登录页
        router.push('/login')
      } else {
        // 获取服务端返回的错误消息
        let message = res.message
        // 提示消息
        showMessage(message, 'error')
      }
    })
  })
}
</script>

<style scoped>
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>